<template>
  <el-dialog v-model="dialogVisible" :title="`${title}项目产物`" width="500">
    <el-form
      label-width="110"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入活动名称" />
      </el-form-item>

      <el-form-item label="活动内容" prop="connect">
        <el-input
          v-model="ruleForm.connect"
          placeholder="请输入活动内容"
          autosize
          type="textarea"
        ></el-input>
      </el-form-item>
      <el-form-item label="负责人" prop="person">
        <el-select
          v-model="ruleForm.person"
          placeholder="请选择负责人"
          multiple
          clearable
        >
          <el-option label="孙小小" value="孙小小"></el-option>
          <el-option label="丁小小" value="丁小小"></el-option>
          <el-option label="张三" value="张三"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开展时间" prop="time">
        <el-date-picker
          v-model="ruleForm.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="收益人群" prop="people">
        <el-input
          v-model="ruleForm.people"
          placeholder="请输入受益人数"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, defineEmits, nextTick } from "vue";
import type { FormInstance, FormRules } from "element-plus";
const $emit = defineEmits(["submit"]);
const title = ref("");
const dialogVisible = ref(false);
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  name: "",
  person: "",
  connect: "",
  time: [],
  people: "",
  id: ""
});
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请选择活动名称", trigger: "blur" }],
  person: [{ required: true, message: "请输入负责人", trigger: "blur" }],
  connect: [{ required: true, message: "请输入活动内容", trigger: "blur" }],
  time: [{ required: true, message: "请选择开展时间", trigger: "change" }],
  people: [{ required: true, message: "请输入受益人数", trigger: "blur" }]
});
const init = async (row: any) => {
  await nextTick(() => {
    ruleFormRef?.value?.resetFields();
  });
  let {
    name = "",
    person = "",
    connect = "",
    time = [],
    people = "",
    id = "",
    show = false
  } = row || {};
  ruleForm.id = row?.id ?? new Date().getTime().toString();
  title.value = row?.id ? "编辑" : "新增";
  if (row) {
    ruleForm.name = name;
    ruleForm.connect = connect;
    ruleForm.time = time;
    ruleForm.id = id;
    ruleForm.show = show;
    ruleForm.person = person;
    ruleForm.people = people;
  }
  dialogVisible.value = true;
};
defineExpose({
  dialogVisible,
  init
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      dialogVisible.value = false;
      $emit("submit", Object.assign({}, ruleForm));
      formEl.resetFields();
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  dialogVisible.value = false;
};
</script>
